<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <v-bread />
    <!-- 列表 -->
    <div class="zhifu p7090">
      <div class="container">
        <div class="bf">
          <div class="name clearfix">
            <div class="img fl"  :style="{backgroundImage:'url('+require('../img/img/tx.png')+')'}" ></div>
            <div class="fl">Jason</div>
          </div>
          <div class="list_zhifu">
            <div class="clearfix list_zhifu_top">
              <div class="fl left">
                <div class="img" :style="{backgroundImage:'url('+require('../img/img/5.jpg')+')'}"  ></div>
              </div>
              <div class="fr right">
                <div>
                  <a href="" class="bl abl"
                    >CITY WALK每周绿道徒步，行走城市间，不在远方的旅行</a
                  >
                  <div class="text">
                    <div class="row">
                      <div class="col-md-8">活动时间：11月21日上午8:00</div>
                      <div class="col-md-4">
                        <div class="tr c0">实付金额 <span>￥199</span></div>
                      </div>
                    </div>
                    活动地址：(广东深圳)龙华区建设东路龙胜恒博中心桥恩心理（深圳龙华店)
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="zgfangshi">
            <div class="ny_title">支付方式：</div>
            <div class="pad_left">
              <div class="ny_subtitle">平台支付：</div>
              <ul class="clearfix row">
                <li class="col-md-2 radio">
                  <input id="zfb" name="sex" type="radio" />
                  <label for="zfb" class="radio-label"
                    ><img src="../img/img/zfb.jpg" alt=""
                  /></label>
                </li>
                <li class="col-md-2 radio">
                  <input id="wx" name="sex" type="radio" />
                  <label for="wx" class="radio-label"
                    ><img src="../img/img/wx.jpg" alt=""
                  /></label>
                </li>
              </ul>
            </div>

            <div class="pad_left">
              <div class="ny_subtitle">支付金额：</div>
              <ul class="clearfix row">
                <li class="col-md-2 radio">
                  <input id="zfb" name="sex" type="radio" />
                  <label for="zfb" class="radio-label"
                    ><img src="../img/img/jtyh.jpg" class="border" alt=""
                  /></label>
                </li>
                <li class="col-md-2 radio">
                  <input id="wx" name="sex" type="radio" />
                  <label for="wx" class="radio-label"
                    ><img src="../img/img/jtyh.jpg" class="border" alt=""
                  /></label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../websitecom/Head.vue";
import vFoot from "../websitecom/Foot.vue";
import vBread from "../websitecom/Bread.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
  },
  data() {
    return {};
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
    beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
 
  mounted() {},
};
</script>

<style >
html.active  { 
  overflow-y: scroll !important;
  height: auto !important;
}
.list_team ul .activity {
  margin-bottom: 2.125rem;
}
</style>

<style lang="less" scoped>
.zhifu {
    background-color: #f7f8fa;

    .name {
        font-size: 1rem;
        line-height: 3.125rem;
        color: #787878;
        padding: .9375rem 1.5rem;

        .img {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 50%;
            background-size: cover !important;
            background-position: center center !important;
            margin-right: 1.25rem;

        }

        border-bottom: 1px solid #dfdfdf;
    }

    .list_zhifu {
        border-bottom: 1px solid #dfdfdf;
        padding: 1.5625rem;

        .list_zhifu_top {
            background-color: #f7f8fa;
            padding: 1.5625rem;

            .img {
                height: 10rem;
            }

            .abl {
                font-size: 1.125rem;
                font-weight: 600;
                line-height: 2.25rem;
                color: #000000;
            }

            .left {
                width: 20%;
            }

            .right {
                width: 80%;
                padding-left: 1.875rem;

                .text {
                    .c0 {
                        span {
                            font-size: 1.25rem;
                            margin-left: .625rem;
                            color: #4c8bf5;
                        }
                    }
                }
            }
        }
    }

    .zgfangshi {
        padding: 1.5625rem;

        .ny_subtitle {
            font-size: 1rem;
            line-height: 1.25rem;
            color: #000000;
            margin-bottom: 1.5rem;
        }

        ul li {
            float: left;
            position: relative;
        }

        .pad_left {
            margin-left: 1rem;
        }

        .radio input[type="radio"]:checked+.radio-label:before,
        .radio input[type="radio"]:checked+.radio-label:before,
        .radio input[type="radio"]+.radio-label:before,
        .radio input[type="radio"]+.radio-label:before {
            margin-top: .625rem;
        }

        .border {
            border: 1px solid #ddd;
            padding: .5rem 0;
        }
    }
}
.zhifu .list_zhifu .list_zhifu_top .img {
    height: 10rem;
}
</style>